import { Table } from 'antd';
import type { ColumnsType } from 'antd/es/table';
import React, { useEffect, useState } from 'react';
import { adminCount, adminList } from '../../api/request';


interface DataType {
    key: React.Key;
    name: string;
    age: number;
    address: string;
}

const columns: ColumnsType<DataType> = [
    {
        title: '姓名',
        dataIndex: 'user_name',
        width: 200,
    },
    {
        title: '注册日期',
        dataIndex: 'create_time',
        width: 200,
    },
    {
        title: '地址',
        dataIndex: 'city',
        width: 200,
    },
    {
        title: '权限',
        dataIndex: 'admin',

    },
];

// const data: DataType[] = [];
// for (let i = 0; i < 100; i++) {
//     data.push({
//         key: i,
//         name: `Edward King ${i}`,
//         age: 32,
//         address: `London, Park Lane no. ${i}`,
//     });
// }

const App: React.FC = () => {
    const [data, setData] = useState([])
    const [count, setCount] = useState(0)
    //当前页
    const [Page, setPage] = useState(0)
    //每页条数
    const [PageSize, setPageSize] = useState(20)
    const onChange = (page: number, pageSize: number) => {
        setPage(() => page)
        setPageSize(() => pageSize)
    }

    useEffect(() => {
        
        adminList({
            offset: Page,
            limit: PageSize
        }).then(res => {
            // console.log(res);
            setData(() => res.data.data)
        })

        adminCount().then(res => {
            // console.log(res);
            setCount(() => res.data.count)
        })

    }, [Page, PageSize])
    return (
        <Table
            columns={columns}
            dataSource={data}
            pagination={
                {
                    total: count,
                    pageSize: PageSize,
                    onChange: (page, pageSize) => {
                        onChange(page, pageSize)
                    }
                }
            }
            scroll={{ y: 430 }} />
    )
};

export default App;